<template>
  <div class="home" v-touch:swipe.top="onHandleSwipeUp">
    <div class="home-finger">
      <img src="@/assets/img/finger.png" id="fingerImg" />
    </div>
    <div class="home-content">
      <img :src="imgs[idx]" />
    </div>
    <div class="home-carousel">
      <div class="swiper swiper-container-banner">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(value, idx) in imgs" :key="idx">
            <img :src="value" />
          </div>
        </div>
      </div>
    </div>
    <audio controls id="videoRef" v-show="false">
      <source src="./assets/music.mp3" />
    </audio>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { Toast } from "vant";
import { sendMsg } from "@/service/modules/login/login.ts";
const imgs = ref([
  require("@/assets/img/0.png"),
  require("@/assets/img/1.png"),
  require("@/assets/img/2.png"),
  require("@/assets/img/3.png"),
  require("@/assets/img/4.png"),
  require("@/assets/img/9.png"),
  require("@/assets/img/10.png"),
  require("@/assets/img/11.png"),
  require("@/assets/img/12.png"),
  require("@/assets/img/14.png"),
  require("@/assets/img/15.png"),
  require("@/assets/img/16.png"),
  require("@/assets/img/17.png"),
  require("@/assets/img/18.png"),
  require("@/assets/img/19.png"),
]);
const codes = [
  "#r0",
  "#s0",
  "#t0",
  "#u0",
  "#v0",
  "#w0",
  "#x0",
  "#y0",
  "#z0",
  "#R0",
  "#S0",
  "#T0",
  "#U0",
  "#V0",
  "#W0",
  // "#X0",
  // "#Y0",
  // "#Z0",
];
const idx = ref(null);

const onHandleSwipeUp = async (e) => {
  // document.getElementById("fingerImg")?.style = "animation: none";
  const { code } = await sendMsg({
    message: codes[idx.value],
  });
  if (code === 200) {
    const videoRef = document.getElementById("videoRef");
    videoRef.play();
    Toast.success("发送成功");
  }
};

onMounted(() => {
  new window.Swiper(".swiper-container-banner", {
    autoplay: false, //可选选项，自动滑动
    loop: true,
    slidesPerView: 3,
    spaceBetween: 20,
    on: {
      slideChange: (swiper) => {
        if (!idx.value) {
          idx.value = 1;
        }
        if (swiper.activeIndex > 16) {
          idx.value = swiper.activeIndex - 17;
        } else {
          idx.value = swiper.activeIndex - 2;
        }
      },
    },
  });
});
</script>
<style lang="less">
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.home {
  height: 100vh;
  background-image: url("assets/img/bg.png");
  background-size: 100% 100%;
  overflow-x: hidden;
  &-finger {
    text-align: center;
    position: fixed;
    width: 100%;
    padding-top: 90px;
    z-index: 999;
    img {
      width: 60px;
      animation: bounce 1s infinite;
    }
  }
  &-content {
    text-align: center;
    position: relative;
    top: 70px;
    img {
      width: 100%;
    }
  }
  &-carousel {
    position: fixed;
    bottom: 120px;
    width: 100%;
    .swiper {
      overflow: inherit;
    }
    .swiper-slide {
      background-image: url("assets/img/pp.png");
      background-size: 100% 100%;
      img {
        width: 100%;
        height: 25vw;
      }
    }
    .swiper-slide-next {
      transform: scale(1.5);
    }
  }
}

.swiper-slide {
}
</style>
